<template>
  <!-- 中国地图 -->
  <div id="main" ref="chinaMap" style="width: 500px; height:500px" />
</template>

<script>
import * as echarts from 'echarts'
//  引入中国的json文件
import chinaMap from '../../../json/geojson-master/echarts/china.json'
export default {
  name: 'ChinaMap',
  data() {
    return {
      // 假数据 空气质量
      airDate: [
        {
          name: '北京', value: 99.92
        },
        {
          name: '天津', value: 39.13
        },
        {
          name: '河北', value: 31.22
        },
        {
          name: '陕西', value: 40
        },
        {
          name: '山西', value: 55
        },
        {
          name: '内蒙古', value: 60
        },

        {
          name: '辽宁', value: 70
        },
        {
          name: '吉林', value: 20
        },
        {
          name: '黑龙江', value: 80
        },
        {
          name: '上海', value: 210
        },
        {
          name: '江苏', value: 40
        },
        {
          name: '浙江', value: 39.92
        },
        {
          name: '安徽', value: 45
        },
        {
          name: '福建', value: 55
        },
        {
          name: '江西', value: 60
        },
        {
          name: '山东', value: 33
        },
        {
          name: '河南', value: 80
        },
        {
          name: '湖北', value: 10
        },
        {
          name: '湖南', value: 66
        },
        {
          name: '广东', value: 190
        },
        {
          name: '广西', value: 39.92
        },
        {
          name: '海南', value: 20
        },
        {
          name: '重庆', value: 55
        },
        {
          name: '四川', value: 36
        },
        {
          name: '贵州', value: 39.92
        },
        {
          name: '云南', value: 39.92
        },
        {
          name: '西藏', value: 39.92
        },
        {
          name: '甘肃', value: 39
        },
        {
          name: '青海', value: 39.92
        },
        {
          name: '宁夏', value: 39.92
        },
        {
          name: '新疆', value: 39.92
        },
        {
          name: '香港', value: 220
        },
        {
          name: '台湾', value: 265
        }

      ],
      //   假数据 涟漪动画
      scatterDate: [
        {
          value: [117.283042, 31.86119] // 坐标轴信息
        }
      ]
    }
  },
  mounted() {
    echarts.registerMap('chinaMap', chinaMap)
    this.drawLine()
  },
  methods: {

    // 开始画图了
    drawLine() {
    //   const vm = this
      const myChart = echarts.init(this.$refs.chinaMap)

      const option = {
        geo: {
          type: 'map', // 字符串
          map: 'chinaMap', //  anHuiMap要和  registerMap这个函数里的名字保持一致
          roam: true, // 拖动缩放
          label: {
            show: true // 展示标签 展示每个省份的名称
          },
          zoom: 1 // 设置初始缩放比例
          //  设置地图中心点的坐标
        //   center: [87.617733, 43.792818] // 一新疆为中心点的坐标轴
        },
        // 标题
        title: {
          // text: 'XXXXXXXX',
          subtext: '中国地图',
          left: 'right'
        },
        series: [
          {
            data: this.airDate,
            // 把 series系列和geo关联起来
            geoIndex: 0, // 将空气质量的数据和第0个geo配置关联在一起
            type: 'map' // 将数据关联起来
          },
          {
            data: this.scatterDate, // 配置散点的坐标数据
            type: 'effectScatter', // 图表类型
            coordinateSystem: 'geo', // 指明散点所使用的坐标系统 是geo的坐标系统
            rippleEffect: { // 涟漪动画的效果变的更大一点
              scale: 10
            }

          }
        ],
        visualMap: { // 设置最小值  最大值
          min: 0,
          max: 300,
          inRange: {
            color: ['white', 'red'] // 控制颜色渐变的范围 颜色从白色慢慢的过渡到红色
          }
          // calculable: true // 小三角 出现滑块效果
        }

      }

      myChart.setOption(option)
    //   this.map.on('click', function(v) {
    //     console.log(v)
    //   })
    }
  }
}
</script>
<style scoped>
#main {
    border: 1px solid red;
}

</style>
